
header{
	border-bottom:1px solid #E8EEF2;
	position: fixed;
	top:0px;
	left:0px;
	width:100%;
	background-color:#fff;
	z-index:4;
	& .container{
		padding-left:25px;
		padding-right:25px;
		margin-left:auto;
		margin-right:auto;
		width:100%;
		& .outer__header{
			display: flex;
			justify-content: space-between;
			min-height:68px;
			align-items:center;
			padding:15px 0px;
			& .left__header{
				display: flex;
				align-items:center;
				width:100%;
				& .search__wrapper{
					width:100%;
					max-width:700px;
					position: relative;
					display: flex;
					align-items:center;
                    justify-content:center;
                    flex-direction: column;
					&>a{
						& img{
							transition:.05s ease all;
						}
					}
					& .search__files--dropdown{
						position: absolute;
						left:0px;
						background: #FFFFFF;
						box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15), inset 0px 1px 0px #F5F7FA;
						border-radius: 4px;
						width:100%;
						top:42px;
						& .elem__search--files{
							& a{
								display:flex;
								padding:15px;
								text-decoration:none;
								color: #637381;
								font-size:16px;
								line-height:19px;
								transition:.4s ease all;
								&:hover{
									background: #F6F5FD;
								}
								&>span{
									display: inline-block;
									margin:0px 5px;
									height: 18px;
									&.file__name{
										color:#212B36;
										font-size:16px;
										line-height:19px;
										font-weight:bold;
										overflow: hidden;
										max-width: 22vw;
										white-space: nowrap;
										text-overflow: ellipsis;
									}
									&.root__parent , &.current__folder{
										color: #212b36;
										font-size: 16px;
										line-height: 19px;
										overflow: hidden;
										max-width: 22vw;
										text-overflow: ellipsis;
										white-space: nowrap;
										font-weight: 400;
									}
								}
								& .spacer{
									display: inline-block;
									margin:0px 5px;
								}
							}
						}
					}
					&>a{
						position: absolute;
						left:15px;
						transition:.4s ease all;
						&:hover{
							opacity:.7;
						}
					}
					&>input{
						width:100%;
						min-height:42px;
						border:1px solid #BEC9D3;
						padding-left:45px;
						padding-right:15px;
						font-size:16px;
						color:#000;
						border-radius:5px;
						&:focus{
							border-color:#3c85ee;
						}
					}
				}
				& .logo__wrapper{
					margin-right:40px;
					&>a{
						display: inline-flex;
						align-items:center;
						justify-content:center;
						transition:.4s ease all;
						&:hover{
							opacity:.7;
						}
					}
				}
			}
			& .right__header{
				padding-left:100px;
				& .profile__info{
					display: flex;
					align-items:center;
					& .settings__button{
						display: inline-flex;
						align-items:center;
						& a{
							display: inline-flex;
							transition:.4s ease all;
							&:hover{
								opacity:.7;
							}
						}
					}
				}

				& .profile__wrapper{
					margin-left:25px;
					& .profile__button{
						&>a{
							min-width:36px;
							min-height:36px;
							border-radius:250px;
							display: inline-flex;
							align-items:center;
							justify-content:center;
							transition:.4s ease all;
							text-decoration: none;
							&:hover{
								opacity:.7;
							}
						}
					}
				}
			}
		}
	}
}

@media (max-width:1200px){
	header{
		& .container {
			& .outer__header {
				& .left__header {
					& .search__wrapper{
						max-width:550px;
					}
				}
			}
		}
	}
}
@media (max-width:991px){
	header{
		& .container {
			& .outer__header {
				position: relative;
				& .left__header {
					display: flex;
					flex-direction:column;
					justify-content:center;
					align-items:center;
					& .logo__wrapper{
						margin-bottom:5px;
						margin-right: auto;
						& a{
							& img{
								max-width:180px;
							}
						}
					}
					& .search__wrapper{
						max-width:100%;
					}
				}
				& .right__header{
					position: absolute;
					padding-left:0px;
					right:0px;
					top:12px;
				}
			}
		}
	}
}
@media (max-width:480px){
	header{
		& .container{
			padding-left:15px;
			padding-right:15px;
			& .outer__header{
				& .left__header{
					min-height:40px;
					& .search__wrapper{
						& .search__files--dropdown{
							& .elem__search--files{
								& a{
									&>span.file__name{
										font-size:14px;
									}
									&>span.root__parent{
										font-size:14px;
									}
									&>span.current__folder{
										font-size:14px;
									}
									font-size:14px;
									padding:12px;
									flex-wrap:wrap;
								}
							}
						}
					}
					& .logo__wrapper{
						margin-bottom:10px;
						& a{
							& img{
								max-width:140px;
							}
						}
					}
				}
				& .right__header{
					& .profile__info{
						& .profile__wrapper{
							margin-left:15px;
							& .profile__button{
								& a{
									min-width:30px;
									min-height:30px;
									& span{
										font-size: 13px;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}





.header__icon {
	width: 161px;
}





// .header {
//     text-align: center;
//     // height: 11vh;
//     display: flex;
//     flex-direction: row;
//     border-bottom: 1px solid #dadce0;
//     justify-content: space-between;
//     /* display: none; */
//     position: fixed;
//     /* top: 0; */
//     width: 100%;
//     z-index: 1;

//     @media (max-width: $desktop-breakpoint) {
//         text-align: center;
//         display: flex;
//         flex-direction: row;
//         border-bottom: 1px solid #dadce0;
//         justify-content: space-between;
//         position: fixed;
//         background: white;
//         top: 0;
//         left: 0;
//         right: 0;
//         width: 100%;
//         height: 80px;
//         padding: 0;
//         z-index: 2;
//         // background: blue;
//     }
// }

// .header__title {
//     color: white;
//     text-decoration: none;
//     h1 {
//         margin: 0;
//     }
// }

// .header__image {
//     width: 100px;
//     height: 30px;
//     margin: 20px 0 15px 20px;
//     cursor: pointer;
//     user-select: none;

//     @media (max-width: $desktop-breakpoint) {
//         width: 73px;
//         height: 24px;
//         margin: 25px 0 15px 14px;
//         display: none;
//     }
    
// }

// .header__form {
//     width: 55%;
//     margin-left: -179px;
//     position: relative;

//     @media (max-width: $desktop-breakpoint) {
//         width: 67%;
//         margin-top: 5px;
//         margin-left: 8px;
//         position: unset;
//     }
// }


// .header__content {
//     display: flex;
//     justify-content: space-between;
//     align-items: center;
//     padding: $s-size 0;
// }

// .header__setting {
//     width: 30px;
//     height: 30px;
//     /* position: fixed; */
//     /* right: 15px; */
//     /* top: 0px; */
//     margin: 20px 20px 20px 0;
//     cursor: pointer;

//     @media (max-width: $desktop-breakpoint) {
//         margin: 25px 20px 20px 10px;
//     }

    
// }

// .header__input {
//     border: 1px solid #f1f3f4;
//     height: 50px;
//     font-size: 1.8rem;
//     font-weight: 300;
//     padding: 1.2rem;
//     margin: 10px 0 10px 0;
//     /* margin-left: 130px; */
//     width: 100%;
//     border-radius: 3px;
//     background: #f1f3f4;

//     @media (max-width: $desktop-breakpoint) {
       
//         width: 121%;
//     }
// }
// .header__input:focus {
   
//     background: white;
//     outline: none;
//     border-style: groove;
// }  

// .header__input__suggested {
//     width: 100%;
//     max-height: 43vh;
//     overflow: scroll;
//     background: white;
//     /* color: black; */
//     margin-top: -10px;
//     position: absolute;
//     z-index: 3;
//     box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2);
//     border-radius: 0 0 6px 6px;
//     border: groove 1px #f1f3f4;
    
//     scrollbar-width: none; /* Firefox */
//     -ms-overflow-style: none;  /* IE 10+ */
//     &::-webkit-scrollbar {
//         width: 0px;
//         background: transparent; /* Chrome/Safari/Webkit */
//     }

//     @media (max-width: $desktop-breakpoint) {
        
//         width: 100vw;
//         // margin-left: -23vw;
//         left: 0;
//         max-height: 50vh;
//         overflow: scroll;
//         background: white;
//         margin-top: 1px;
//         position: absolute;
//         z-index: 3;
//         box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2);
//         border-radius: 0 0 6px 6px;
//         border: groove 1px #f1f3f4;
//     }

// }


// .header__input__suggested--gone {
//     display: none;
// }

// .header__input__suggested__item {
//     display: flex;
//     flex-direction: row;
//     justify-content: space-between;
//     align-items: center;  
    

//     @media (max-width: $desktop-breakpoint) {
//         height: 55px;
//     }
// }

// .header__input__suggested__item:hover {
    
//     background: lightgrey;
//     border-radius: 6px;
// }

// .header__input__suggested__item__title__wrapper {

//     height: inherit;
//     color: red;
//     /* width: 400px; */
//     display: flex;
//     flex-direction: row;
// }

// .header__input__suggested__item__title {
//     color: #373737;;
//     font-weight: 300;
//     font-size: 18px;
//     padding-left: 9px;
//     font-size: small;
//     text-overflow: ellipsis;
//     max-width: 41vw;
//     overflow: hidden;
//     white-space: nowrap;

//     @media (max-width: $desktop-breakpoint) {
//         color: #373737;
//         font-weight: 300;
//         font-size: 18px;
//         padding-left: 9px;
//         font-size: medium;
//         text-overflow: ellipsis;
//         max-width: 41vw;
//         overflow: hidden;
//         white-space: nowrap;
//     }
    
// }

// .header__input__suggested__item__subtitle {
//     color: #373737;;
//     font-weight: 100;
//     font-size: small;
//     margin-right: 10px;
// }

// .header__input__suggested__item__image {
//     width: 25px;
//     margin-left: 10px;
//     opacity: 0.7;  

//     @media (max-width: $desktop-breakpoint) {
//         width: 42px;
//         margin-left: 10px;
//         opacity: 0.7;
//     }

// }